import loginStyle from './index.module.scss'
import { Button, Checkbox, Form, Input,Alert } from 'antd';
import { login } from '@/api/user'
import { setToken } from '@/store/user'
import { useDispatch } from "react-redux"

export default function Login () {
    let dispatch = useDispatch()
    const onFinish = async (values) => {
        console.log('登录 Success:', values);
        if(values.agree){
            const res =  await login({
                mobile: values.mobile,
                password: values.password
            })
            dispatch(setToken(res))
        }else{
          alert('请同意协议后进行登录')
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return <div className={loginStyle['login-box']}>
        <div className={loginStyle['form-box']}>
            <h1>手机号登录</h1>
        <Form
            name="basic"
            
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >
            <Form.Item
                name="mobile"
                rules={[
                    {
                        required: true,
                        message: '请输入您的账号！',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: '请输入您的密码！',
                    },
                ]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item name="agree"
                valuePropName="checked">
                <Checkbox>用户平台使用协议</Checkbox>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit" block>
                    登录
                </Button>
            </Form.Item>
        </Form>
        </div>
    </div>
}